import { ProFormColumnsType } from "@ant-design/pro-form"
import { Form, ModalProps } from "antd"
import { useEffect, useState } from "react"
import { FormColumnsGenerater } from "./useForm"
import type { FormSchema } from "@ant-design/pro-form/es/components/SchemaForm"
import { ProDescriptionsItemProps, ProDescriptionsProps, StepsForm, StepFormProps } from "@ant-design/pro-components"

export const useStepForm = () => {
    const props: StepFormProps = {}
    return {
        props
    }
}

export interface IModalForm {
    title: string,
    onCancel?: () => void,
    columns: (ProFormColumnsType[] | FormColumnsGenerater),
    onFinish: (values: any) => Promise<boolean | void>,
    submitText?: string;
    resetText?: string;
}
export interface ProDescriptionsPropsGenerater {
    (val?: any): ProDescriptionsItemProps[] | Promise<ProDescriptionsItemProps[]> | Promise<any[]>
}
export interface IModalDetail {
    title: string,
    onCancel?: () => void,
    columns: (ProDescriptionsItemProps[] | ProDescriptionsPropsGenerater),
    column?: number;
}
export function useModalDesc<T>(p: IModalDetail) {
    const [open, setOpen] = useState<boolean>(false)
    const [title, setTitle] = useState<string>(p.title)
    const [record, setRecord] = useState<any>(null)
    const [columns, setColumns] = useState<ProDescriptionsItemProps[]>([])
    const [loading, setLoading] = useState<boolean>(false)
    const modalProps: ModalProps = {
        open: open,
        onCancel: () => {
            setOpen(false)
            p.onCancel && p.onCancel()
        },
        destroyOnClose: true,
        title: title,
        footer: null
    }
    const descProps: ProDescriptionsProps = {
        columns: columns,
        dataSource: record,
        column: p.column || 1
    }
    useEffect(() => {
        if (!open) return;

        if (typeof p.columns === 'function') {
            const columns = p.columns(record)
            if (Array.isArray(columns)) {
                setColumns(columns)
            } else {
                setLoading(true)
                columns.then(c => {
                    setColumns(c)
                })
            }
        } else {
            setColumns(p.columns)
        }
    }, [open])
    return {
        descProps,
        modalProps,
        setColumns,
        open,
        setOpen: (open: boolean, record?: any) => {
            setRecord(record)
            setOpen(open)
        },
        setTitle,
        record,
        setRecord,
        loading,
        setLoading
    }
}
export function useModalForm<T>(p: IModalForm) {
    const [open, setOpen] = useState<boolean>(false)
    const [title, setTitle] = useState<string>(p.title)
    const [record, setRecord] = useState<any>(null)
    const [columns, setColumns] = useState<ProFormColumnsType[]>([])
    const [form] = Form.useForm()
    const modalProps: ModalProps = {
        open: open,
        onCancel: () => {
            setOpen(false)
            p.onCancel && p.onCancel()
        },
        destroyOnClose: true,
        title: title,
        footer: null
    }
    const formProps: FormSchema<T> = {
        columns: columns,
        form: form,
        onFinish: async (formData: T) => {
            return p.onFinish(formData)
        },
        submitter: {
            searchConfig: {
                submitText: '确认',
                resetText: '取消'
            },
            onReset: () => {
                setOpen(false)
                p.onCancel && p.onCancel()
            }
        }
    }
    useEffect(() => {
        if (!open) return;
        if (typeof p.columns === 'function') {
            const columns = p.columns(record)
            if (Array.isArray(columns)) {
                setColumns(columns)
            } else {
                columns.then(c => setColumns(c))
            }
        } else {
            setColumns(p.columns)
        }
    }, [open])
    useEffect(() => {
        if (!record) {
            form.resetFields();
            return;
        }
        form.setFieldsValue(record)
    }, [record])
    return {
        formProps,
        modalProps,
        form,
        setColumns,
        open,
        setOpen: (open: boolean, record?: any) => {
            setRecord(record)
            setOpen(open)
        },
        setTitle,
        record,
        setRecord,
    }
}